<template>
 <div class="meetingQuestion">
     <el-header>{{meeting.name}}会议</el-header>
     <div></div>
     <div>
         <el-row class="tagsbut">
            <el-button type="info" size="mini" @click="copyAddress"
            class="tag-read" :data-clipboard-text="questtionLink">分享链接</el-button>
            <el-button type="primary" size="mini" @click="linkHotWords">热点词汇</el-button>
            <el-button type="success" size="mini" @click="reflash">刷新</el-button>
         </el-row>
         <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="getRowClass"
            style="width: 100%">
            <el-table-column
            prop="content"
            label="问题"
            width="180">
            </el-table-column>
            <el-table-column
            label="提出时间">
            <template slot-scope="scope">
                {{scope.row.time | dateFmt('YYYY-MM-DD HH:mm:ss')}}
            </template>
            </el-table-column>
            <el-table-column
            label="是否忽略"
            width="180">
            <template slot-scope="scope">
                <el-tag :type="scope.row.overlook?'info':'primary'" @click="remove(scope.row.id,scope.row.overlook)">{{scope.row.overlook?'还原':'忽略'}}</el-tag>
            </template>
            </el-table-column>
            
        </el-table>
     </div>
    <div class="block" style="margin-top:10px">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize">
        </el-pagination>
    </div>
 </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
    name: 'MeetingQuestions',
    data() {
        return {
            currentPage: 1,
            currentSize: 10,
            meeting:{
                
            },
            tableData:[],
            meetingId:null,
            questtionLink:'',
            totalSize:0
        }
    },
    mounted(){
        this.initMeetingQuestions()
        setInterval(() => {
            this.initMeetingQuestions();
        }, 5000);
    },
    methods:{
        copyAddress() {
            var clipboard = new Clipboard('.tag-read')
            clipboard.on('success', e => {
              this.$notify({
                title: '成功',
                message: '复制成功',
                type: 'success'
            });
              // 释放内存
              clipboard.destroy()
            })
            clipboard.on('error', e => {
              // 不支持复制
            this.$notify.error({
                title: '错误',
                message: '该浏览器不支持自动复制'
            });
              // 释放内存
              clipboard.destroy()
            })
        },
        getRowClass ({row, column, rowIndex, columnIndex}) {
            if (rowIndex === 0) {
                return 'background: #14AC83;color:#ffffff; '
            } else {
                return ''
            }
        },
        initMeetingQuestions(){
            // this.meeting = this.$route.params;
            
            this.meetingId =  this.$route.params.meetingId;
            this.questtionLink = 'http://'+IPConfig.address+':'+IPConfig.port+'/#/question/'+this.meetingId
            if(this.meetingId!=null){
                this.getMeetingById(this.meetingId)
            }else{
                this.meeting = this.$store.state.meeting
            }
            
            
        },
        handleSizeChange(val) {
            this.currentSize = val;
            this.initMeetingQuestions();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.initMeetingQuestions();
        },
        getMeetingById(meetingId){
            this.axios.get('/meeting/'+meetingId).then((res)=>{
                this.meeting=res.data;
                this.pageQuestions();
            }).catch((err)=>{
                console.log(err);
            })
        },
        linkHotWords(){
            this.$router.push('/hotWords')
        },
        pageQuestions(){
            this.axios.post('/question/page',{
                "properties":{
                    "pageNumber":this.currentPage-1,
                    "pageSize":this.currentSize,
                    "sortMap":{
                        "time":"desc"
                    },
                    "queryMap":{
                        "meetingId":this.meeting.id,
                    }
                }
            }).then((res)=>{
                this.tableData=res.data.content;
                this.totalSize=res.data.total;
            }).catch((err)=>{
                console.log(err);
            })
        },
        remove(questionId,overlook){
            this.axios.put('/question/ignore',{"id":questionId}).then((res)=>{
                this.initMeetingQuestions()
                if(overlook){
                    this.$notify({
                        title: '成功',
                        message: '还原成功',
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        title: '成功',
                        message: '忽略成功',
                        type: 'success'
                    });

                }
            }).catch((err)=>{
                console.log(err);
            })
        },
        reflash(){
            window.history.go(0)
        },
        shareLink(){

        }
    }
}
</script>

<style scoped>
    .meetingQuestion{
        margin: 0 auto;
        width: 70%;
        
    }
    .tagsbut{
        display: flex;
        flex-direction: row;
    }
</style>
